<template>
  <div class="rdp-tool-container">
    <div class="header">
      <h1>RDP工具</h1>
    </div>
    
    <div class="content">
      <div class="tool-sections">
        <div class="tool-section">
          <h3>远程桌面连接</h3>
          <div class="connection-form">
            <a-form layout="vertical">
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="服务器地址">
                    <a-input v-model:value="connectionForm.host" placeholder="请输入服务器IP或域名" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="端口">
                    <a-input-number v-model:value="connectionForm.port" :min="1" :max="65535" style="width: 100%" />
                  </a-form-item>
                </a-col>
              </a-row>
              
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="用户名">
                    <a-input v-model:value="connectionForm.username" placeholder="请输入用户名" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="密码">
                    <a-input-password v-model:value="connectionForm.password" placeholder="请输入密码" />
                  </a-form-item>
                </a-col>
              </a-row>
              
              <a-form-item>
                <a-button type="primary" @click="connect" :loading="connecting">
                  {{ connecting ? '连接中...' : '连接' }}
                </a-button>
                <a-button style="margin-left: 8px" @click="disconnect" :disabled="!connected">
                  断开连接
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
        
        <div class="tool-section">
          <h3>连接状态</h3>
          <div class="status-info">
            <a-descriptions :column="2" bordered>
              <a-descriptions-item label="连接状态">
                <a-tag :color="connected ? 'green' : 'red'">
                  {{ connected ? '已连接' : '未连接' }}
                </a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="服务器地址">
                {{ connectionForm.host || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="端口">
                {{ connectionForm.port || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="用户名">
                {{ connectionForm.username || '-' }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'

const connecting = ref(false)
const connected = ref(false)

const connectionForm = reactive({
  host: '',
  port: 3389,
  username: '',
  password: ''
})

const connect = async () => {
  if (!connectionForm.host || !connectionForm.username) {
    message.error('请填写完整的连接信息')
    return
  }
  
  connecting.value = true
  
  // 模拟连接过程
  setTimeout(() => {
    connecting.value = false
    connected.value = true
    message.success('连接成功')
  }, 2000)
}

const disconnect = () => {
  connected.value = false
  message.info('已断开连接')
}
</script>

<style scoped>
.rdp-tool-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.header {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

.tool-sections {
  max-width: 800px;
}

.tool-section {
  margin-bottom: 32px;
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.tool-section h3 {
  color: #262626;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.connection-form {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.status-info {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}
</style>